Skip to content

vite 项目开启 gzip

今天研究了一下 vite 项目开启 gzip 打包,配合 nginx 踩了一点小坑。特此记录一下

1. vue 项目安装插件

powershell
pnpm add vite-plugin-compression -D
js
// vite.config.ts
import viteCompression from "vite-plugin-compression";

export default defineConfig({
  plugins: [
    // ....其他配置
    viteCompression({
      algorithm: "gzip",
      deleteOriginFile: false, // 不删除源文件
    }),
  ],
});

2. 配置 nginx

配置静态压缩需要 nginx 的ngx_http_gzip_static_module模块,我用的 1.25.1 版本,已经默认安装了该模块。配置前可以先执行 nginx -V命令看下有没有--with-http_gzip_static_module模块。

nginx
# nginx.conf 文件

http{

    #......其他配置

    # server模块化
    include       xxx/*.conf;  # nginx.conf同级目录新建文件夹xxx

    # 开启gzip
    gzip on;

    # 静态压缩
    gzip_static on;

    # 启用gzip压缩的最小文件,小于设置值的文件将不会压缩
    gzip_min_length 1k;

    # gzip 压缩级别,1-10,数字越大压缩的越好,也越占用CPU时间
    gzip_comp_level 2;

    # 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png image/jpg;

    # 是否在http header中添加Vary: Accept-Encoding,建议开启
    gzip_vary on;

    # 禁用IE 6 gzip
    gzip_disable "MSIE [1-6]\.";

    server{
        ...
    }
    #......其他配置

}
nginx
# xxx文件夹下的 xxxx.conf 文件,名字无所谓,只要后缀是 .conf 就行


server {
    listen          8001;
    server_name     localhost;
    location / {
        root    html/zr-workflow/dist;
        index   index.html;
    }
    location /prod-api/{
        proxy_pass http://192.168.1.164:8667/process-task/;
    }

}

3. 结果

未开启 gzip

image.png

开启了 gzip

image.png

冷知识:

  1. 看看Response Headers 下有没有Content-Encoding: gzip,有就代表开启了 gzip

  2. 看看Etag选项 有没有 W/ 。有:服务器端压缩,gzip_static失效,没有:服务端直接拿的.gz 文件

上次更新于: